<!doctype "html">
<html>
    <head> 
        <title>Netflics</title>
        <script src="http://connect.facebook.net/en_US/all.js"></script>     
        <link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />
        <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="main_header">
                <div id="backDetailsArrow" class="hidden">
                    <p>Back</p>
                </div>
                <div id="backGenresArrow" class="hidden">
                    <p>Home</p>
                </div>
                <div id="logo">
                </div>
                <div id="searchImage" class="visible">
                </div>
                <div id="backSearchArrow" class="hidden">
                    <p>Search</p>
                </div>
            </div>
            <div id="content">
                <div class="contentWrapper">
                    <div id="mainPage" class="contentBox">
                        <div id="comedyCarousel">
                            <p>Comedy</p>
                                    <ul id="comedyList" class="jcarousel-skin-tango"></ul>
                        </div>

                        <script id="comedyTemplate" class="carousel" type="text/template">
                            <% for (var i = movies.length - 1; i >= 0; i--) { %>
                                <li id = <%= movies[i].id %>>
                                    <%= movies[i].poster_path %>
                                </li>
                            <% }; %>
                        </script>        


                        <div id="actionCarousel">
                             <p>Action</p>
                                    <ul id="actionList" class="jcarousel-skin-tango"></ul>
                        </div>

                        <script id="actionTemplate" class="carousel" type="text/template">
                            <% for (var i = movies.length - 1; i >= 0; i--) { %>
                                <li id = <%= movies[i].id %>>
                                    <%= movies[i].poster_path %>
                                </li>
                            <% }; %>
                        </script>


                        <div id="fictionCarousel">
                             <p>Fiction</p>
                                    <ul id="fictionList" class="jcarousel-skin-tango"></ul>
                        </div>     

                        <script id="fictionTemplate" class="carousel" type="text/template">
                            <% for (var i = movies.length - 1; i >= 0; i--) { %>
                                <li id = <%= movies[i].id %>>
                                    <%= movies[i].poster_path %>
                                </li>
                            <% }; %>
                        </script>

                        <div id="westernCarousel">
                             <p>Western</p>
                                    <ul id="westernList" class="jcarousel-skin-tango"></ul>
                        </div>

                        <script id="westernTemplate" class="carousel" type="text/template">
                            <% for (var i = movies.length - 1; i >= 0; i--) { %>
                                <li id = <%= movies[i].id %>>
                                    <%= movies[i].poster_path %>
                                </li>
                            <% }; %>
                        </script>

                        <div id="suspenseCarousel">
                             <p>Suspense</p>
                                    <ul id="suspenseList" class="jcarousel-skin-tango"></ul>
                        </div>        

                        <script id="suspenseTemplate" class="carousel" type="text/template">
                            <% for (var i = movies.length - 1; i >= 0; i--) { %>
                                <li id = <%= movies[i].id %>>
                                    <%= movies[i].poster_path %>
                                </li>
                            <% }; %>
                        </script>
                    </div>

                    <div id="descriptionPage" class="contentBox">
                        <div id="movieDetails">
                            <p></p>
                        </div>

                        <script id="movieDetailsTemplate" class="details" type="text/template">
                                    <h2><%= movie.original_title %></h2>
                                    <%= movie.poster_path %>
                                    <h4>Release Date: </h4><%= movie.release_date %>
                                    <h4>Overview: </h4><%= movie.overview %>
                                    <button id="trailerButton">View Trailer</button>
            
                        </script>
                    </div>

                    <div id="trailerPage" class="contentBox">
                        <div id="trailerImage" class="hidden">
                            <img src="images/coming_soon.gif">
                        </div>
                    </div>

                    <div id="searchPage" class="contentBox">
                        <div id="searchResults">
                            <p>Search by: </p>
                            <select id="searchType">
                                <option value="movie">Movie</option>
                                <option value="person">Person</option>
                            </select>
                            <input type=search id="searchField" name="s">
                            <button id="searchButton">Go</button>
                            <ul id="searchList" class="jcarousel-skin-tango"></ul>
                            <button id="searchAgainButton" class="hidden">Search Again</button>
                        </div>

                        <script id="searchTemplate" class="carousel" type="text/template">
                            <% if (movies.length==0){ %>
                                <p>Sorry, there are no results for this query</p>
                            <% } %>
                            <% if (movies.length>0){ %>
                                <% for (var i = movies.length - 1; i >= 0; i--) { %>
                                    <li id = <%= movies[i].id %>>
                                        <%= movies[i].poster_path %>
                                    </li>
                                <% } %>
                            <% };%>
                        </script>

                    </div>
                </div>
            </div>
            <div id="footer">
                <p>El uso del servicio de Netflics y de este sitio web constituye la aceptaci&oacute;n de nuestros T&eacute;rminos de uso y nuestra Pol&iacute;tica de privacidad.<br />&reg;2012 Netflics, Inc. Todos los derechos reservados.</p>
            </div>
            <script src="js/components/jquery.js"></script>
            <script src="js/components/underscore-min.js"></script>
            <script src="js/components/backbone-min.js"></script>
            <script src="js/components/jquery.jcarousel.min.js"></script>
            <script src="js/general/app.js"></script>
        </div>    
    </body>
</html>